<template>
  <div style="width:100%;height:100%;background-color: #fff;display: flex;position: relative;flex-direction: column;">

    <div style="flex:1;width: 100%;"></div>
    <div style="width: 100%;height: 468px;display: flex;align-items: flex-end;">
      <img src="/static/images/leftimg.png" alt="" style="width: 394px;height: 468px;flex-shrink: 0;">
      <div style="flex-grow: 1;"></div>
      <img src="/static/images/rightimg.png" alt="" style="width: 487px;height: 412px;flex-shrink: 0;justify-content: flex-end;">
    </div>

    <div style="width:100%;height:100%;position:absolute;left:0;top:0;display: flex;justify-content: center;align-items: center;">
      <div style="width:1000px;box-shadow: 0 0 25px #cac6c6;display:flex;background-color: #fff;">
        
        <div class="leftbox">
          <div style="color:#fff;letter-spacing: 3px;margin-top:5px;">英文名字自己写</div>
          <div style="color:#fff;font-size: 24px;margin-top:10px;">啥系统自己写</div>
          <div style="display:flex;flex-direction: column;flex:1;justify-content: center;padding:0 80px;">
            <div style="color:#fff;font-size:18px;">
            </div>
          </div>
          <div style="width:100%;">
            <div style="padding:0 80px;">
              <div style="border-top:1px solid #a0a0a0;width:100%;height:80px;color:#fff;font-size:14px;display:flex;justify-content: center;align-items: center;">
                啥系统自己写
              </div>
            </div>
          </div>
          
          
        </div>


        <div style="width:50%;flex-shrink: 0;">
          <div style="padding: 0 80px;display: flex;flex-direction: column;height:100%;justify-content: center;">
            <!-- <div style=""> -->
              <el-form class="loginitems" label-width="0" @submit.prevent>
                <div style="width:100%;height:50px;line-height:70px;font-weight: bold;font-size: 26px;">登录</div>
                <el-form-item label="">
                  <el-input
                    style="width:100%;height: 40px;"
                    placeholder="请输入账号"
                    v-model="login.username"
                    autocomplete="new-password">
                  </el-input>
                </el-form-item>
                <el-form-item label="" style="">
                  <el-input
                    type="password"
                    style="width:100%;height: 40px;"
                    placeholder="请输入密码"
                    v-model="login.password"
                    autocomplete="new-password">
                  </el-input>
                </el-form-item>

                <el-checkbox v-model="isremember" label="记住我" size="large" />

                <input style="display:none;" type="submit" @click="loading"/>

                <div class="submitcss">
                  <el-button type="primary" @click="loading" :loading="isok" size="default" style="width:100%;height:40px;">登录</el-button>
                </div>
                <div style="width:100%;text-align: center;color:#409EFF;font-size:14px;margin-top:20px;">
                  <!-- 已有账号，忘记密码？ -->
                </div>
                <div style="height:50px;width:100%;"></div>
              </el-form>
             
            </div>
           


        </div>

      </div>
    </div>

  </div>
</template>

<script setup>
  import { reactive, ref, onMounted, inject } from 'vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const $utils = inject('$utils')
  // console.log(proxy.$utils)
  const login = reactive({
    username: '',
    password: ''
  })
  const isok = ref(false)
  const isremember = ref(false)

  const onMountedHook = function () {
    // 是否开启记住我
    const rememberFlag = $utils.cookies.get('isremember')
    if (!rememberFlag) {
      login.username = ''
      login.password = ''
      isremember.value = false
    } else {
      login.username = $utils.cookies.get('username')
      login.password = $utils.cookies.get('password')
      isremember.value = true
    }
  }

  function loading() {
    if (isremember) {
      $utils.cookies.set('username', login.username)
      $utils.cookies.set('password', login.password)
      $utils.cookies.set('isremember', true)
    } else {
      $utils.cookies.set('username', '')
      $utils.cookies.set('password', '')
      $utils.cookies.set('isremember', false)
    }
    // 测试用哒
    $utils.cookies.set('username', 'username')
    router.push({path: '/admin'})
    $utils.post({
      url: '/Api/Login/GetJwtToken',
      params: login,
      showLoading: true,
      ok: function (res) {
        $utils.cookies.set('token', (res.data.token.token_type + ' ' + res.data.token.token))
        $utils.cookies.set('nickName', res.data.nickName)
        router.push({path: '/admin'})
      }
    })
  }

  onMounted(() => {
    onMountedHook()
  })
</script>

<style scoped>
.loginbox{
  box-shadow: 0 0 25px #cac6c6;
  position: absolute;
  margin:100px auto;
  width:300px;
  height:260px;
  border:1px solid #eaeaea;
  border-radius: 5px;
}
.loginitems{
  width: 100%;
  margin:auto;
}
.loginimgbox{
  margin:50px auto 30px;
  width: 100px;
  height:100px;
}
.submitcss{
  text-align: center;
  margin-top:10px;
}
.loginimg{
  width: 100%;
  height:100%;
}
.logintext{
  position:absolute;
  left: 10px;
  top:10px;
}
.el-form-item{
  margin:0;
  margin-top:20px;
}

.leftbox {
  position: relative;
  width:50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-height:564px;
  background: -webkit-gradient(linear, left bottom, left top, from(#3a485a), to(#607089));
  background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
}
.leftbox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../../public/static/images/left_top.png") no-repeat 0 0;
}
.leftbox::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url("../../public/static/images/right_bottom.png") no-repeat right bottom;
}
</style>
